<script setup lang="ts">
import { ArticleVo, PageArticleReq, PageArticleType } from '@/api/article/type'
import { pageArticleVo } from '@/api/article'

import { getArticle } from '@/utils/publicMethods'
import RightSide from '@/views/home/components/RightSide.vue'
import useStore from '@/store'

const store = useStore()
// 轮播列表
const carouselList = ref(<ArticleVo[]>[])

// 展示文章列表
const dataList = ref(<ArticleVo[]>[])
// 是否数据加载
const isDataLoading = ref(false)
// 总数
const total = ref()
// 是否展示加载更多
const isNeedLoadMore = ref(true)
// 是否展开分类
const classify = ref(false)

// 表示选中的全部按钮
const selectedBtnId = ref(<number | null>null)

const queryParams = ref(<PageArticleReq>{
  pageNum: 1,
  pageSize: 10,
  type: 'NEW'
})

/** 获取轮播数据 */
function getCarouselList() {
  const queryData: PageArticleReq = {
    pageNum: 1,
    pageSize: 3,
    type: 'HOT'
  }
  pageArticleVo(queryData).then(({ data: response }) => {
    carouselList.value = response.data.records
  })
}

/** 查询展示文章列表 */
async function queryArticleListByType(type: PageArticleType, id: number | null) {
  queryParams.value.type = type
  queryParams.value.businessId = id
  queryParams.value.pageNum = 1
  queryParams.value.pageSize = 10
  isDataLoading.value = true
  await pageArticleVo(queryParams.value).then(({ data: response }) => {
    dataList.value = response.data.records
    total.value = response.data.total
    const a = Math.ceil(total.value / queryParams.value.pageSize)
    isNeedLoadMore.value = queryParams.value.pageNum + 1 <= a
  })
  isDataLoading.value = false
  selectedBtnId.value = id
}

/** 加载更多 */
async function loadMore() {
  const a = Math.ceil(total.value / queryParams.value.pageSize)
  if (queryParams.value.pageNum + 1 >= a) {
    isNeedLoadMore.value = false
  }
  if (queryParams.value.pageNum + 1 <= a) {
    queryParams.value.pageNum = 1 + queryParams.value.pageNum
    isDataLoading.value = true
    await pageArticleVo(queryParams.value).then(({ data: response }) => {
      dataList.value = [...dataList.value, ...response.data.records]
    })
    isDataLoading.value = false
  }
}

/** 展开或者收缩 */
function classification() {
  classify.value = !classify.value
}

onMounted(() => {
  /** 文章列表 */
  queryArticleListByType('NEW', null)
  /** 轮播图 */
  getCarouselList()
})
</script>

<template>
  <HomeContainerTemplate>
    <template #container-main>
      <el-space style="width: inherit" direction="vertical" fill size="large">
        <!--轮播图-->
        <el-carousel class="article-carousel" :interval="4000">
          <el-carousel-item v-for="article in carouselList" :key="article" class="carousel-item">
            <el-image
              class="carousel-img"
              fit="cover"
              :src="article.cover"
              @click="getArticle(article.id)"
            />
            <div class="carousel-title" @click="getArticle(article.id)">
              <span>{{ article.title }}</span>
            </div>
          </el-carousel-item>
        </el-carousel>
        <!--分类展示-->
        <el-card class="category-card" shadow="hover">
          <div class="card-header" :class="{ category: !classify }">
            <el-space wrap size="default">
              <el-button
                style="border-radius: 10px"
                :class="{ selected: !selectedBtnId }"
                @click="queryArticleListByType('NEW', null)"
                >全部
              </el-button>
              <el-button
                v-for="category in store.categories"
                :key="category.id"
                style="border-radius: 10px"
                :class="{ selected: category.id === selectedBtnId }"
                @click="queryArticleListByType('CATEGORY', category.id)"
              >
                {{ category.name }}
                <div class="tags">{{ category.articleCount }}</div>
              </el-button>
            </el-space>
            <svg-icon icon-class="spread" class="icon-unfold" @click="classification"></svg-icon>
          </div>
        </el-card>
        <!--文章列表展示-->
        <ArticleCardList
          :loading="isDataLoading"
          :data-list="dataList"
          :is-need-load-more="isNeedLoadMore"
          :auto-load="false"
          @load-more="loadMore"
        />
      </el-space>
    </template>
    <template #container-right>
      <right-side></right-side>
    </template>
  </HomeContainerTemplate>
</template>

<!--手机端和电脑端-->
<style scoped lang="scss">
/* 电脑端 */
@media screen and (min-width: 760px) {
  .article-carousel {
    border-radius: 10px;
    border: 1px solid #e5e7ec;

    .carousel-item {
      .carousel-img {
        width: inherit;
        height: 100%;
      }
    }
  }
}

/* 手机端 */
@media screen and (max-width: 759px) {
  .article-carousel {
    box-sizing: border-box;
    border-radius: 10px;

    .carousel-item {
      .carousel-img {
        width: inherit;
        height: inherit;
      }
    }
  }
  :deep(.el-carousel__indicators) {
    .el-carousel__indicator {
      .el-carousel__button {
        background-color: #5b9df8;
      }
    }
  }
}
</style>

<!--公共CSS-->
<style scoped lang="scss">
.category-card {
  max-height: 180px;
  padding: 0;
  border-radius: 10px;
  border: 1px solid transparent;
}

.category {
  height: 32px;
}

.carousel-title {
  cursor: pointer;
  position: absolute;
  z-index: 10;
  bottom: 40px;
  height: 40px;
  width: 100%;
  line-height: 40px;
  text-align: center;
  background: rgba(0, 0, 0, 0.3);
  font-size: 22px;
  color: #ecf8ff;
  font-weight: bold;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.selected {
  color: var(--el-button-hover-text-color);
  border-color: var(--el-button-hover-border-color);
  background-color: var(--el-button-hover-bg-color);
  outline: none;
}

// 展开图标
.icon-unfold {
  padding-top: 10px;
}

.icon-unfold:hover {
  cursor: pointer;
  display: block;
  transition: all 0.2s;
  color: #409eff;
  text-shadow: 2px 2px 5px #409eff;
}
</style>
